import React from 'react';
import { connect } from 'react-redux';
import config from '../../../assets/js/conf/config';
import SubHeaderComponent from '../../../components/subHeader/index';
import * as Request from '../../../services/user/index';
import action from '../../../store/actions/index';
import { Switch, Toast } from 'antd-mobile';
import Css from '../../../assets/css/home/reg/index.css';

class LoginIndex extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            checked: false,
            sCellphone: '',
            sPassword: '',
            sType: 'password'
        }   
        this.bSubmit = true;
    }

    //页面跳转
    goPage(url){
        this.props.history.push(config.path+url);
    }

    //显示隐藏密码
    switchChange(){
        this.setState({ checked: !this.state.checked }, () => {
            const type = this.state.checked ? 'text' : 'password';
            this.setState({ sType: type });
        });
    }

    //用户登录
    login(){
        const { sCellphone, sPassword } = this.state;
        if(sCellphone.match(/^\s*$/)){
            Toast.info('请输入您的手机号', 2);
            return false;
        }
        if(!sCellphone.match(/^1[0-9][0-9]{9}/)){
            Toast.info('您输入的手机号格式有误', 2);
            return false;
        }
        if(sPassword.match(/^\s*$/)){
            Toast.info('请输入密码', 2);
            return false;
        }
        if(this.bSubmit){
            this.bSubmit = false;
            Request.loginData({ cellphone: sCellphone, password: sPassword }).then(res => {
                if(res.code === 200){
                    const { uid, nickname, auth_token } = res.data;
                    this.props.dispatch(action.user.login({ uid, nickname, authToken: auth_token, isLogin: true }));
                    this.props.history.goBack();
                }else{
                    Toast.info(res.data, 2);
                }
                this.bSubmit = true;
            });
        }
    }

    componentWillUnmount(){
        this.setState = (state, callback) => { return ; }
    }


    render(){
        const { checked, sCellphone, bCodeSuccess, sCodeText, sCode, sPassword, sType } = this.state;
        return (
            <div className={Css['page']}>
                {/* 头部 */}
                <SubHeaderComponent title='会员登录'></SubHeaderComponent>  
                <div className={Css['main']}>
                    <div className={Css['code-wrap']} style={{marginTop:0}}>
                        <input type='text' value={sCellphone} onChange={(e) => this.setState({ sCellphone: e.target.value })} placeholder="手机号" />
                    </div>
                    <div className={Css['password-wrap']}>
                        <div className={Css['password']}>
                            <input type={sType} value={sPassword} onChange={(e) => this.setState({ sPassword: e.target.value })} placeholder="密码" />
                        </div>
                        <div className={Css['switch-wrap']}>
                            <Switch checked={checked} color='#EB1625' onChange={() => this.switchChange()}></Switch>
                        </div>
                    </div>
                    <div className={Css['sure-btn']} onClick={() => this.login()}>登录</div>
                    <div className={Css['fastreg-wrap']}>
                        <div className={Css['item']}>
                            <img src={require('../../../assets/images/home/index/forget.png')} alt='忘记密码' />忘记密码
                        </div>
                        <div className={Css['item']} onClick={() => this.goPage('reg/index')}>
                            <img src={require('../../../assets/images/home/index/reg.png')} alt='快速注册' />快速注册
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store;
})(LoginIndex);